<template>
  <van-tabs @click="tabClick" v-model="active">
    <van-tab v-for="item in brotherCategory" :title="item.name" :key="item.id">
      <div class="title">
        <div class="title1">{{ currentCategory.name }}</div>
        <div class="title2">{{ currentCategory.front_name }}</div>
      </div>
      <products :goodsList="categoryList"></products>
    </van-tab>
  </van-tabs>
</template>

<script>
import { categoryDoods, goodsList } from "@/request/api";
import products from "@/components/products/products.vue";
export default {
  components: {
    products,
  },
  data() {
    return {
      active: 0, /// 标题栏的当前项索引
      brotherCategory: [], // 标题栏数组
      currentCategory: {}, // 当前标题栏选中项
      activeColor: "darkred", // 当前选中项颜色
      categoryList: [], // 商品列表数组
    };
  },
  created() {
    // console.log(this.$route)
    this.getChannelData();
  },
  mounted() {},
  methods: {
    tabClick() {
      // console.log(name);
      let newId = this.brotherCategory[this.active].id;
      // console.log(newId);
      this.getChannelData(newId);
    },
    getChannelData(newId) {
      let id = newId ? newId : this.$route.query.id;
      //在这里请求数据
      categoryDoods({
        id,
      }).then(res => {
        console.log(res);
        this.brotherCategory = res.data.brotherCategory;
        this.currentCategory = res.data.currentCategory;
        // 这里更改active/加载进来
        // console.log(this.currentCategory)
        this.brotherCategory.map((val, index)=>{
          // console.log(val, index)
          if(val.id==res.data.currentCategory.id){
            this.active=index
          }
        })
      });
      //商品对应的数据
      goodsList({
        categoryId: id,
        page: 1,
        size: 1000,
      }).then(res => {
        // console.log(res);
        this.categoryList = res.data.goodsList;
        // 这里更改active/加载进来filterCategory里面的checked
         //checked为true是就为对
        //  res.data.filterCategory.map((item,index)=>{
        //   //  console.log(index)
        //   if(item.checked===true){
        //     console.log(index)
        //     this.active=index+1
        //   }
        //  })

      })
    }
  }
};
</script>

<style scoped lang="less">
.van-tabs {
  background-color: #eee;
}
.title {
  text-align: center;
  line-height: 30px;
  padding: 20px 0 10px;
  .title2 {
    color: #666;
  }
}
</style>
